<template>
  <div class="Container">
    <div class="tools">
       <a-select  
       placeholder="请选择XX镇" 
       style="width: 120px" 
       @dropdownVisibleChange="QueryTownData"
       @change="handleChange">
         <a-select-option v-for="item in townData" :key="item.id">{{item.properties.XZQMC}}</a-select-option>
       </a-select>
        <a-select  
        placeholder="请选择XX村"
         style="width: 120px" 
        @dropdownVisibleChange="QueryVillageData"
         @change="handleChange1">
         <a-select-option v-for="item in villageData" :key="item.id">{{item.properties.XZQMC}}</a-select-option>
       </a-select>
     </div>
    <div class="map">
      <!-- <Maps :selectTown="this.selectedTown" :selectVillage="this.selectedVillage"></Maps> -->
      <Maps @child-map='getChildMap'></Maps>
    </div>
  </div>
</template>

<script>
import L from "leaflet"
// import Query from "esri-leaflet/src/Tasks/Query"
import Maps from "../../../components/Maps"
var esri = require("esri-leaflet");
export default {
  components: {
    Maps
  },
  data () {
    return {
      townData:null,
      villageData:null,
      selectedTown:null,
      selectedVillage:null,
      selectedTownPolygon:null,
      selectedVillagePolygon:null,
      map:null,
      LayerGroup:null
    }
  },
  created () { },
  mounted () { 
    //构建一个layerGroup存放选择的区域
    this.LayerGroup = L.layerGroup()
  },
  watch: {},
  computed: {},
  methods: {
     QueryTownData () {
      esri.query({ url: 'http://demo.njzhxt.com:16080/arcgis/rest/services/fmmp/fmmp_xzq/MapServer/1' }).run((error, result) => {
        if (error) {
          console.log(error)
          return
        }
        this.townData = result.features
        // console.log(this.townData)
      })
    },
    QueryVillageData(){
      esri.query({ url: 'http://demo.njzhxt.com:16080/arcgis/rest/services/fmmp/fmmp_xzq/MapServer/0' }).run((error, result) => {
        if (error) {
          console.log(error)
          return
        }
        this.villageData = result.features
        // console.log(this.villageData);
      })
    },
    handleChange(value){
      this.selectedTownPolygon=null
      this.selectedTown=null
      this.LayerGroup.clearLayers()
        //  console.log(value);
         this.townData.forEach(item => {
              if(item.id===value){
               this.selectedTown=item
              }
         }); 
        //  console.log(this.selectedTown.geometry);
         this.selectedTown.geometry.coordinates.forEach(item=>{
               item.forEach(itemPoint=>{
                  itemPoint.reverse()
               })
         })
         console.log(this.selectedTown);
          this.selectedTownPolygon=L.polygon([this.selectedTown.geometry.coordinates],{color:'red'})
         this.LayerGroup.setZIndex(999).addLayer(this.selectedTownPolygon).addTo(this.map)
      this.map.flyToBounds(this.selectedTownPolygon.getBounds())
    },
    handleChange1(value){
      this.selectedVillage=null
      this.selectedVillagePolygon=null
      this.LayerGroup.clearLayers()
      // console.log(value);
       this.villageData.forEach(item => {
              if(item.id===value){
               this.selectedVillage=item
              }
         });  
        //  console.log(this.selectedVillage.geometry);
         this.selectedVillage.geometry.coordinates.forEach(item=>{
               item.forEach(itemPoint=>{
                  itemPoint.reverse()
               })
         })
         console.log(this.selectedVillage);
         this.selectedVillagePolygon=L.polygon([this.selectedVillage.geometry.coordinates],{color:'red'})
         this.LayerGroup.setZIndex(999).addLayer(this.selectedVillagePolygon).addTo(this.map)
      this.map.flyToBounds(this.selectedVillagePolygon.getBounds())
    },
    getChildMap(data){
          console.log(data);
          this.map=data
    }
  },
}
</script>
<style lang="scss" scoped>
.Container {
  position: relative;
  height: 100%;
  width: 100%;
    .tools{
      position: absolute;
      top: 1%;
      left: 50px;
      z-index: 999;
    }
    .map{
      position: relative;
      height: 100%;
      width: 100%;
      z-index: 1;
    }
}
</style>